<template>
	<view class="content">
		<!-- 返回主页 -->
		<view class="back" @click="back">
			<view class="backicon"></view>
		</view>
		<view class="toptitle">
			<text>公告栏</text>
		</view>
		<view class="info" v-if="status">
			<u-list height="1350rpx">
				<u-list-item v-for="i in notices" :key="i">
					<view class="Oneinfo" @click="show = true,
						title=i.title,content=i.content,
						time=i.time">
						<view style="display: flex;justify-content: center;align-items: center;">
							<text>{{i.title}}</text>
						</view>
						<view style="margin-left: 180rpx;margin-top: -50rpx;font-weight: 500;">
							<text>{{i.time}}</text>
						</view>
						<view>
							<text class="textstyle">{{i.content | replaceSpaces|truncate(35)}}</text>
						</view>
					</view>
				</u-list-item>
			</u-list>
			<view style="color: #545454; font-size: 30rpx;">
				<text>*只展示最新五条通知，更多通知请前往网页查看</text>
			</view>
		</view>

		<u-popup :show="show" :round="20" mode="center" closeable @close="close">
			<view style="width: 700rpx;" >
				<view class="gg_text" style="margin-top: 70rpx;">
					<text>{{title}}</text>
				</view>
				<view>
					<text style="display: block; margin-top: 10rpx;text-align: center;">{{time}}</text>
				</view>
				<view>
					<text class="textarea">{{content}}</text>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		HNIT_URL,
	} from "@/constants/index.js";
	export default {
		data() {
			return {
				//公告数组
				notices: [],
				status: true,
				show: false,
				//标题
				title: "",
				//内容
				content: "",
				//时间
				time: ""
			}
		},
		onLoad() {
			this.querynotice();
		},
		//拦截器
		filters: {
			//截取字符串
			truncate(value, length) {
				if (!value) return "";
				if (value.length <= length) return value;
				return value.substring(0, length) + "...";
			},
			//替换空格
			replaceSpaces(value) {
				if (!value) return "";
				return value.replace(/\s/g, "");
			},
		},

		methods: {
			//打开公告通知 查看公告
			querynotice() {
				let params = {}
				this.$request.post(HNIT_URL + "wx/querynoticeByManage", params).then(res => {
					this.notices = res.data
				})
			},
			close() {
				this.show = false
			},
			back() {
				uni.redirectTo({
					url: "../../../pages/manage/home/index"
				})
			}
		}
	}
</script>

<style>
	.gg_text {
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		margin-top: 10rpx;
	}

	.showdt {
		font-weight: bold;
		margin-top: 40rpx;
		margin-left: 40rpx;
		font-size: 35rpx;
	}

	.data-v-27d76bae {
		margin-top: -30rpx;
	}


	.textstyle {
		font-size: 30rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-indent: 30rpx;
		font-weight: 400;
		line-height: 40rpx;
		margin-top: -15rpx;
		padding-left: 30rpx;
		width: 580rpx;
	}

	.lengthcon {
		float: left;
		width: 230rpx;
		margin-left: 30rpx;
	}

	.Oneinfo {
		box-shadow: 1px 2px 5px 2px #dadada;
		margin-top: 30rpx;
		margin-left: 5%;
		width: 90%;
		background-color: white;
		line-height: 100rpx;
		font-weight: bold;
		border-radius: 40rpx;
		height: 240rpx;
	}

	.top {
		color: #555555;
		font-size: 35rpx;
		width: 90%;
		background-color: white;
		height: 100rpx;
		line-height: 100rpx;
		font-weight: bold;
		border-radius: 40rpx;
	}

	.backicon {
		float: left;
		background-image: url("data:image/svg+xml,%3Csvg t='1689146294791' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='19508' width='200' height='200'%3E%3Cpath d='M501.30944 464.22016c0-19.99872-16-35.19488-35.99872-35.99872H310.4V350.62784L137.61536 464.22016l171.98592 113.59232V500.21888h155.70944c19.99872-0.79872 35.99872-16 35.99872-35.99872z' fill='%23005CFF' p-id='19509'%3E%3C/path%3E%3Cpath d='M886.38464 212.01408c0-39.46496-31.99488-71.45984-71.45984-71.45984H443.88864c-39.46496 0-71.45984 31.99488-71.45984 71.45984v117.69856a29.42464 29.42464 0 1 0 58.84928 0V225.00352a25.6 25.6 0 0 1 25.6-25.6h358.05184c2.72384 0 5.23264 0.88576 7.296 2.3552l-252.50816 91.904c-15.872 5.77536-28.74368 29.28128-28.74368 52.49536v382.88384H456.87808a25.6 25.6 0 0 1-25.6-25.6V598.7328a29.42464 29.42464 0 1 0-58.84928 0v117.69856c0 39.46496 31.99488 71.45984 71.45984 71.45984h97.08544v62.68928c0 23.21408 12.86656 37.3504 28.74368 31.57504l287.42144-104.61184c15.872-5.77536 28.74368-29.28128 28.74368-52.49536v-0.39424c0.3072-2.69824 0.50688-5.43232 0.50688-8.2176v-504.4224z' fill='%23005CFF' p-id='19510'%3E%3C/path%3E%3C/svg%3E");
		background-size: cover;
		width: 50rpx;
		height: 50rpx;
		margin-top: 6rpx;
		margin-left: 12rpx;
	}

	.back {
		float: left;
		width: 80rpx;
		margin-top: 99rpx;
		height: 58rpx;
		margin-left: -640rpx;
		border-radius: 80rpx;
		backdrop-filter: blur(5px);
		/* 设置高斯模糊效果 */
		background-color: rgba(255, 255, 255, 0.9);
		border: 1rpx #c6c6c6 solid;
	}


	.info {
		width: 100%;
		margin-top: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.textarea {
		display: block;
		margin-left: 35rpx;
		height: 800rpx;
		resize: none;
		font-size: 28rpx;
		line-height: 1.5;
		overflow-wrap: break-word;
		overflow: auto;
		padding-top: 20rpx;
		text-indent: 30rpx;
	}
	.toptitle {
		margin-top: -65rpx;
		color: #000000;
		font-size: 50rpx;
		font-family: FZSuXSLSJW;
	}
	page {
		background-color: #eeeeee;
	}
</style>